<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/22
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>销售管理</title>

    <link href="/statics/css/bootstrap.css" rel="stylesheet"/>
    <link href="/statics/font/bootstrap-icons.css" rel="stylesheet">

</head>
<body>
<%@include file="inc/nav.jsp" %>

<div class="container-fluid">
    <div class="row p-3 mt-3">
        <div class="col-3 col-lg-2">
            <%@include file="inc/menu.jsp" %>
        </div>
        <div class="col-9 col-lg-10">
            <div class="d-flex">
                <div class="input-group mr-auto w-50">
                    <form class="form-inline" action="/sale/list" method="post">
                        <label class="mr-1">从</label>
                        <input type="date" name="startDate" class="form-control mr-1" />
                        <label class="mr-1">到</label>
                        <input type="date" name="endDate" class="form-control mr-1" />
                        <button type="submit" class="btn btn-success"><i class="bi-search"></i>查询</button>
                    </form>
                </div>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addSale"><i
                        class="bi-plus"></i>添加销售记录
                </button>

            </div>
            <div class="row mt-3">
                <div class="col-12">
                    <table class="table table-hover table-bordered table-striped text-center">
                        <thead class="thead-dark">
                        <tr>
                            <th>序号</th>
                            <th>销售日期</th>
                            <th class="w-75">明细</th>
                        </tr>
                        </thead>
                        <tbody>

                        <c:forEach items="${requestScope.saleList}" var="s" varStatus="vs">
                            <tr>
                                <td>${vs.count}</td>
                                <td>${s.tradeTime}</td>
                                <td>
                                    <a class="btn btn-primary btn-sm" data-toggle="collapse" href="#collapse-${s.id}" load-detail-id="${s.id}">点击查看明细
                                    </a>

                                    <div class="collapse" id="collapse-${s.id}">
                                        <div class="card card-body">
                                        </div>
                                    </div>
                                </td>


                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pagination justify-content-between">
                            <li class="page-item">
                                <a class="page-link rounded-pill"
                                   href="/sale/list?currentPage=${requestScope.pager.previous}&startDate=${param.startDate}&endDate=${param.endDate}"
                                   tabindex="-1">上一页</a>
                            </li>
                            <li class="page-item"><a class="page-link rounded-pill">总共${requestScope.pager.pageCount}页，当前第${requestScope.pager.currentPage}页</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link rounded-pill"
                                   href="/sale/list?currentPage=${requestScope.pager.next}&startDate=${param.startDate}&endDate=${param.endDate}">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="fixed-bottom bg-dark text-white">
    <p class="text-center p-3 m-0">
        超市管理系统
    </p>
</footer>

<!-- addSale 模态框开始 -->
<div class="modal fade" id="addSale">
    <div class="modal-dialog">
        <div class="modal-content" style="width:max-content">
            <div class="modal-header">
                <h5 class="modal-title">添加销售记录</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="addSaleForm"  action="/sale/add" method="post">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">商品编码</label>
                        <div class="col-sm-9">
                            <div class="input-group">
                                <input type="text" id="sn" class="form-control" placeholder="请输入条形码">
                                <div class="input-group-append">
                                    <button id="addSaleItem" class="btn btn-outline-secondary" type="button" >添加商品</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>条形码</td>
                        <td>商品名</td>
                        <td>单价</td>
                        <td>库存</td>
                        <td>数量</td>
                    </tr>
                    </thead>
                    <tbody id="saleDetail">


                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4">
                            总共<span id="totalCount">0</span>件商品，总价<span id="totalPrice">0</span>元。
                        </td>
                    </tr>
                    </tfoot>
                </table>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="addButton" type="button" class="btn btn-primary">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/statics/js/jquery.js" type="text/javascript"></script>
<script src="/statics/js/bootstrap.js" type="text/javascript"></script>
<script>
    function sum() {
        let totalCount = 0;
        let totalPrice = 0;
        let items = $("#saleDetail").find("tr");
        $.each(items, function (i, item) {
            let price = parseFloat($(item).find("[name=price]").val());
            let count = parseInt($(item).find("[name=count]").val());
            totalCount += count;
            totalPrice += (count * price);
        });

        $("#totalCount").text(totalCount);
        $("#totalPrice").text(Math.ceil(totalPrice*100)/100);
    }


    $(document).ready(function () {
        $("#addSaleItem").click(function () {
            let sn = $("#sn").val();
            $.getJSON("/goods/sn", {sn: sn}, function (result) {
                let goods = result.data;
                if (goods == undefined) {
                    window.alert("商品不存在");
                } else {
                    $("#saleDetail").append(` <tr>
                        <td>\${goods.sn}</td>
                        <td>\${goods.name}</td>
                        <td><input name="price" disabled="disabled" value="\${goods.price}"></input></td>
                        <td>\${goods.stock}</td>
                        <td>
                            <input type="hidden" name="goodsId" value="\${goods.id}">
                            <input type="number" name="count" step="1" min="1" max="\${goods.stock}" value="1" contenteditable="false" onchange="sum()">
                        </td>
                    </tr>`);
                    sum();
                }
            });
        });
        $("#addButton").click(function () {
            let items = $("#saleDetail").find("tr");
            if (items.length > 0) {
                $("#addSaleForm").submit();
            }
        });
        $("[load-detail-id]").click(function () {
            let sale_id = $(this).attr("load-detail-id");
            $.getJSON("/sale/items", {id: sale_id}, function (result) {
                let collapse = $("#collapse-" + sale_id);
                collapse.empty();
                let html = "<table class='table table-condensed  table-sm'>" +
                    "<tr><td>商品</td><td>单价</td><td>数量</td></tr>"
                let saleItems = result.data;
                saleItems.forEach(item => {
                    html += `<tr>
                                <td>\${item.goods.name}</td>
                                <td>\${item.goods.price}</td>
                                <td>\${item.count}</td></tr>`
                });
                html += "</table>"
                collapse.html(html);
            })
        });
    });
</script>
</body>
</html>
